<template>
    <div>
        <div class="header">
            <div class="headerbar">
                <div></div>
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                        <i class="el-icon-user"></i> {{user.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-edit" command="edit">修改密码</el-dropdown-item>
                        <el-dropdown-item divided icon="el-icon-switch-button" command="quit">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <!-- 修改密码 -->
            <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" style="width: 300px">
                    <el-form-item label="原密码" prop="oldPass">
                        <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="$refs['ruleForm'].resetFields()">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {logout} from '@/api/login'
import passwordApi from '@/api/password'

export default {

    data() {

        // 在return 上面进行申明自定校验
        const validateOldPass = (rule, value, callback) => {
            // console.log(this.user.id)
            passwordApi.checkPwd(this.user.id, value).then(response => {
                const resp = response.data
                if(resp.flag) {
                    // 验证通过
                    callback()
                }else {
                    callback(new Error( resp.message ))
                }
            })
        }

        // 校验确认密码是否一致
        const validatePass = (rule, value, callback) => {
            // value 代表 checkPass
            if(value !== this.ruleForm.pass) {
                callback(new Error('两次输入的密码不一致'))
            }else {
                // 相等,则通过
                callback()
            }
        }

        // 注意:在 return 上面,而上面不能使用 逗号 , 结束 
        return {
            user: this.$store.state.user.user,
            dialogFormVisible: false,
            ruleForm: {
                oldPass: '',
                pass: '',
                checkPass: ''
            },
            rules: {
                oldPass: [
                    {required: true, message: '原密码不能为空', trigger: "blur"},
                    { validator: validateOldPass, trigger: 'blur' }
                ],
                pass: [
                    {required: true, message: '新密码不能为空', trigger: "blur"}
                ],
                checkPass: [
                    {required: true, message: '确认密码不能为空', trigger: "blur"},
                    { validator: validatePass, trigger: 'change' }
                ]
            }
        }
    },

    methods: {
        handleCommand(command) {
            switch (command) {
                case 'edit':
                    // 打开修改密码窗口
                    this.handlePwd()
                    break;
                case 'quit':
                    // 退出系统
                    this.handleLogout()
                    break;
                default:
                    break;
            }
        },

        // 退出系统
        handleLogout() {
            this.$store.dispatch('Logout').then(response => {
                if (response.flag) {
                    // 退出成功
                    this.$router.push('/login')
                } else {
                    this.$message({
                        message: response.message,
                        type: 'warning',
                        duration: 500
                    })
                }
            })
        },

        // 打开修改密码窗口
        handlePwd(){
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['ruleForm'].resetFields()
            })
        },
        // 修改密码
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if(valid) {
                   console.log('校验成功')  
                   passwordApi.updatePwd(this.user.id, this.ruleForm.checkPass).then(response => {
                       const resp = response.data
                       // 不管失败还是成功,都进行提醒
                       this.$message({
                           message: resp.message,
                           type: resp.flag ? 'success': 'warning'
                       })

                       if(resp.flag) {
                           // 更新成功, 退出系统,回到登录页面
                           this.handleLogout()
                           // 关闭窗口
                           this.dialogFormVisible = false
                       }
                   })  
                }else {
                    return false
                }
            })
        }
    }
}
</script>

<style scoped>
    .el-dropdown-link {
        cursor: pointer;
    }
</style>